<h1 class="page-header">{{moviesList.title}}</h1>
    <div class="row placeholders">
        <div class="list-group">
            <a href="#/detail/{{item.id}}" class="list-group-item" ng-repeat="item in moviesList.subjects">
                <div class="media">
                    <div class="media-left" href="#">
                        <img data-ng-src="{{item.images.medium}}" alt="{{item.title}}">
                    </div>
                    <div class="media-body" style='text-align: left'>
                        <span class="badge pull-right ng-binding">{{item.rating.average}}</span>
                        <h2 class="media-heading ng-binding">{{item.title}}</h2>
                        <p>类型：<span class="ng-binding" data-ng-repeat='a in item.genres'>{{a}}&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;上映年份：<span class="ng-binding">{{item.year}}</span></p>
                        <p>导演：<span data-ng-repeat='b in item.directors'>{{b.name}}&nbsp;&nbsp;</span></p>
                        <p>主演：<span data-ng-repeat='c in item.casts'>{{c.name}}&nbsp;&nbsp;</span></p>
                    </div>
                </div>
            </a>
        </div>
        <div ng-show="!loading">
            <p>总共：{{page.totalCount}}条记录，第{{page.current}}/{{page.totalPage}}页</p>
            <nav>
                <ul class="pager">
                    <li data-ng-class='{disabled:page.current<=1}'><a  data-ng-click='goBack()'>上一页</a></li>
                    <li data-ng-class='{disabled:page.current>=page.totalPage}'><a data-ng-click='goForward()'>下一页</a></li>
                </ul>
            </nav>
        </div>

    </div>
<!--loading-->
<div class='loading' data-ng-show='loading'>
    <div class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
</div>